import React, { useEffect } from 'react';
import { Modal, Form, Input, Radio,Checkbox } from 'antd';

// 自定义对话框组件：函数组件
const CustomModal = ({ visible, onCreate, onCancel,modalType,updateData }) => {
  // 使用 form 关联表单组件实例
  const [form] = Form.useForm();

  // 相当于 componentDidMount() 阶段，加载时立即调用
  useEffect(() => {
    form.setFieldsValue(updateData)
  },[form,updateData])

  return (
    <Modal
      forceRender
      visible={visible}
      title={modalType === 'create' ? '添加新用户' : '修改用户信息' }
      okText={modalType === 'create' ? '添加' : '修改' }
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            // console.log(values)
            form.resetFields();
            onCreate(values); // 添加或修改 保存时，调用到该函数
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          type:1,
          isOut:0,
          symptom:'无'
        }}
      >
        <Form.Item name="id" hidden>
          <Input />
        </Form.Item>
        <Form.Item
          name="clazz"
          label="班级"
          rules={[
            {
              required: true,
              message: '班级为必填项！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="stuNo"
          label="学号"
          rules={[
            {
              required: true,
              message: '学号为必填项！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            {
              required: true,
              message: '姓名为必填项！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="type" label="测量方式">
          <Radio.Group>
            <Radio value={1}>额温</Radio>
            <Radio value={2}>耳温</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="temperature"
          label="体温"
          rules={[
            {
              required: true,
              message: '体温为必填项！',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="address"
          label="所在地"
        >
          <Input />
        </Form.Item>
        <Form.Item name="isOut" label="是否外出">
          <Radio.Group>
            <Radio value={0}>否</Radio>
            <Radio value={1}>是</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="symptom" label="症状">
          <Checkbox.Group>
            <Checkbox value='无'>无</Checkbox>
            <Checkbox value='咳嗽'>咳嗽</Checkbox>
            <Checkbox value='发热'>发热</Checkbox>
            <Checkbox value='胸闷'>胸闷</Checkbox>
          </Checkbox.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CustomModal